<template>
  <div>
    <div class="main">
      <div class="navbor">
        <div class="loginShopNav">
          <p class="ys-back-home">
            <a @click="toIndex" style="cursor: pointer">依尚服装首页</a>
          </p>
          <p class="helloYS"><em>嗨!欢迎来到依尚服装</em>
            <a @click="toLogin" :style="userInfoStyle" style="cursor: pointer">请登录</a>
            <a class="clearRight" @click="resgister" :style="userInfoStyle" style="cursor: pointer">注册</a>
            <a id="users" :style="userInfoAfterStyle" @mouseenter="showInfo"
               @mouseleave="showInfoOut" @click="toOnwerIndex" style="cursor: pointer">{{ userInfousername }}</a>
          </p>
          <div class="ys-index-userInfo" :style="userMainInfo" @mouseenter="showInfo" @mouseleave="showInfoOut">
            <div class="ys-index-userInfo-head">
            </div>
            <a>账号管理</a>
            <a id="ys-index-userInfo-loginout" @click="delCookieValue" style="cursor: pointer">退出登录</a>
            <h5>个人积分: 460</h5>
            <h5 id="ys-index-userInfo-vip">普通会员</h5>
          </div>
          <ul class="quick-menu">
            <li><a @click="toOnwerIndex">我的"依尚"</a></li>
            <li><a @click="toShopCart" style="cursor: pointer ">购物车</a></li>
            <li><a class="clearLiRight" @click="toCollectionShop" style="cursor: pointer ">收藏夹</a></li>
          </ul>
        </div>
      </div>
      <!--    导航栏-->
      <!--    主题内容-->
      <div class="ys-main-body">
        <div class="demo-input-size">
          <a href="javascript:void (0)" @click="toIndex" class="ys-imgto-Index">
          </a>
          <el-button type="primary" class="ys-body-search-icon" style="color: black;background-color: white">
            <el-icon>
              <search></search>
            </el-icon>
          </el-button>
          <div class="ys-body-search">
            <input type="text" placeholder="请输入搜索的内容">
          </div>
          <el-row class="mb-4" id="regBtn">
            <el-button type="primary" id="searchBtn" @click="toSearch">搜索</el-button>
          </el-row>
        </div>
      </div>
      <!--      搜索框-->
      <div class="ys-bady-main-shop">
        <div class="ys-body-main-sidebar">
          <!--          主题市场-->
          <h4 id="ys-shop-title">主题市场</h4>
          <div class="ys-body-main-sidebar-list">
            <ul id="level1">
              <li class="level1-list" v-for="(c,index) in categoriesAll" :key="index" style="cursor: pointer">
                <h4 id="desc-list-shop">{{ c.categoryName }}</h4>
                <!--                <el-icon class="icon-right">-->
                <!--                  <arrow-right-bold ></arrow-right-bold>-->
                <!--                </el-icon>-->
                <div class="levle1-screen">
                  <ul id="level2">
                    <li v-for="(c2,index) in c.categories" :key="index">
                      <a class="list-desc">
                        {{ c2.categoryName }}
                      </a>
                      <ul id="level3">
                        <li v-for="(c3,index) in c2.categories" :key="index">
                          <a id="shops-list" style="cursor: pointer">
                            {{ c3.categoryName }}
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="ys-body-main-lunbo">
          <div class="ys-body-main-lunbo-img">
            <a style="cursor: pointer">
              <img v-for="(item,index) in slideList" :key="index" :src="getUrl(item.imgUrl)"
                   style="width: 600px;height: 478px;border-radius: 15px" v-show="n==index" alt="" @mouseenter="clearGo"
                   @mouseleave="go">
            </a>
          </div>
          <div class="ys-lunbo-left-k">
            <el-button id="btn-left" @click="clickPage('up')" @mouseenter="clearGo" @mouseleave="go">
              <el-icon class="ys-lunbo-left">
                <arrow-left-bold/>
              </el-icon>
            </el-button>
          </div>
          <div class="ys-lunbo-right-k">
            <el-button id="btn-right" @click="clickPage" @mouseenter="clearGo" @mouseleave="go">
              <el-icon class="ys-lunbo-right">
                <arrow-right-bold/>
              </el-icon>
            </el-button>
          </div>
        </div>
        <div class="ys-body-main-Notice">
          <!--          公告栏-->
          <div class="ys-Notice-loginAndreg">
            <div class="ys-Notice-head-portrait"></div>
            <em id="ys-Notice-hello" :style="userHasNotLogin">Hi 你好</em>
            <em id="ys-Notice-haslogin" :style="userhasLogin">Hi! {{ userInfousername }}</em>
            <el-button type="success" class="ys-Notice-login" @click="toLogin" :style="userHasNotLogin">登录</el-button>
            <el-button type="success" class="ys-Notice-reg" @click="resgister" :style="userHasNotLogin">注册</el-button>
            <div class="ys-notice-hasLogin" :style="userhasLogin">
              <div class="ys-hasLogin-Info">0 <a href="#" @click="toOnwerIndex">购物车</a></div>
              <div class="ys-hasLogin-Info">0 <a href="#">待收货</a></div>
              <div class="ys-hasLogin-Info">0 <a href="#">待发货</a></div>
              <div class="ys-hasLogin-Info">0 <a href="#">待付款</a></div>
              <div class="ys-hasLogin-Info">0 <a href="#">待评价</a></div>
            </div>
          </div>
          <div class="ys-Notice-main">
            <h4 id="notice-content">公告 新鲜事儿都在这里哟~</h4>
            <a href="javascript:void (0)">热销</a><em>潮流服装!你还不来吗？</em>
            <a href="javascript:void (0)">热点</a><em>冰墩墩同款外套!</em>
            <a href="javascript:void (0)">热点</a><em>冬奥会冰墩墩销量已破2000万!</em>
            <a href="javascript:void (0)">招聘</a><em>依尚服装开启2023校园实习生招聘!</em>
          </div>
          <div class="ys-Notice-bottom-bar">
            <div class="ys-Notice-bottom-bar-icon">
              <el-icon class="bar-icon">
                <shopping-cart-full/>
              </el-icon>
              <h6>购物车</h6></div>
            <div class="ys-Notice-bottom-bar-icon">
              <el-icon class="bar-icon">
                <star/>
              </el-icon>
              <h6>我的收藏</h6></div>
            <div class="ys-Notice-bottom-bar-icon">
              <el-icon class="bar-icon">
                <goods/>
              </el-icon>
              <h6>收藏店铺</h6></div>
            <div class="ys-Notice-bottom-bar-icon">
              <el-icon class="bar-icon">
                <clock/>
              </el-icon>
              <h6>浏览记录</h6></div>
          </div>
        </div>
        <div class="ys-body-recommend">
          <h2 id="ys-body-recommend-good">好评推荐</h2>
          <div class="ys-body-recommend-note">全民口碑</div>
          <ul class="tuijian-list">
            <li v-for="(c,index) in goodList" :key="index">
              <ul class="list-tuijian-img">
                <li v-for="(c2,index) in c.imgs" :key="index"> <a @click="toIntroductionShop(c.productId,c.businessInfos[0].buinessName)" style="cursor: pointer"><img :src="getUrl(c2.url)" alt="" style="width: 180px;height: 200px;margin-left: 10px"></a>
                </li>
              </ul>
              <h4 style="margin-left: 10px;font-size: 10px;font-weight: 400;color: rgba(114,112,112,0.36);">累计销量:{{c.soldNum}}</h4>
              <a @click="toIntroductionShop(c.productId,c.businessInfos[0].buinessName)" id="desc-shops" style="cursor: pointer">{{c.content}}</a>
            </li>
          </ul>
        </div>
        <div class="ys-body-yours">
          <h2 id="ys-body-yours-good">个性推荐</h2>
          <div class="ys-body-yours-note">与你符合</div>
          <ul class="tuijian-list">
            <li v-for="(i,index) in personal" :key="index">
              <ul class="list-personal">
                <li v-for="(c2,index) in i.imgs" :key="index"><a @click="toIntroductionShop(i.productId,i.businessInfos[0].buinessName)" style="cursor: pointer"><img :src="getUrl(c2.url)" alt="" style="width: 180px;height: 200px;margin-left: 10px" ></a></li>
              </ul>
              <h4 style="margin-left: 10px;font-size: 10px;font-weight: 400;color: rgba(114,112,112,0.36);">累计销量:{{i.soldNum}}</h4>
              <a id="gexing-tuijian" @click="toIntroductionShop(i.productId,i.businessInfos[0].buinessName)" style="cursor: pointer">{{i.content}}</a>
            </li>
          </ul>
        </div>
      </div>
      <EndOfhtml/>
      <LoginFooter/>
    </div>
  </div>
</template>

<script>
import {Search, ArrowRightBold, ArrowLeftBold, ShoppingCartFull, Star, Goods, Clock} from '@element-plus/icons-vue'
import {publicFun} from "../mixin";
import EndOfhtml from "../components/EndOfhtml";
import LoginFooter from "../components/LoginFooter";

export default {
  name: "shopIndex",
  components: {
    Search,
    ArrowRightBold,
    ArrowLeftBold,
    ShoppingCartFull,
    Star, Goods, Clock,EndOfhtml,LoginFooter
  },
  data() {
    return {
      slideList: [],
      n: 0,
      interId: null,
      selected: 0,
      cookieValue: "",
      userInfoStyle: "",
      userInfoAfterStyle: "display:none",
      userInfousername: "",
      userMainInfo: "display:none",
      userhasLogin: "display:none",
      userHasNotLogin: "",
      vo: "",
      imgs: [],
      ifshow: false,
      categoriesAll: [],
      tuijian: [],
      goodList:[],
      personal:[]
    }
  },
  mixins: [publicFun],
  methods: {
    delCookieValue(){
      this.delCookie("userId")
      this.delCookie("username")
      this.delCookie("userImg")
      this.delCookie("token")
    },
    go() {//开始改变变量n
      this.interId = setInterval(() => {
        this.n++;
        if (this.n == this.slideList.length) {
          this.n = 0;
        }
      }, 4000)
    },
    getproductList() {
      this.$axios.get("api/shopList/categorylist").then((res) => {
        this.categoriesAll = res.data.data;
      }).catch(() => {
        console.log("状态异常")
      })
    },
    clearGo() {
      clearInterval(this.interId)
    },
    clickPage(str) {
      if (str === 'up') {
        if (this.n == 0) {
          this.n = this.slideList.length;
        }
        this.n--;
      } else {
        this.n++;
        if (this.n == this.slideList.length) {
          this.n = 0;
        }
      }
    },
    showCookieValue() {
      var token = this.getCookieValue("token");
      var username = this.getCookieValue("username");
      if (token != null && token != "" && token !="null" ) {
        this.userInfousername = username;
        this.userInfoStyle = "display:none";
        this.userInfoAfterStyle = "";
        this.userhasLogin = "";
        this.userHasNotLogin = "display:none";
      } else if(token == "null"){
        this.userInfoStyle = "";
        this.userInfoAfterStyle = "display:none";
        this.userMainInfo = "display:none";
        this.userhasLogin = "display:none";
        this.userHasNotLogin = "";
      }
    },
    showInfo() {
      this.userMainInfo = "";
    },
    showInfoOut() {
      this.userMainInfo = "display:none";
    },
    golunbo() {//请求轮播图路径
      this.$axios.get('api/indexService/indeximg').then((res) => {
        this.vo = res.data;
        this.slideList = this.vo.data;
      })
    },
    getUrl(name) {
      return require("../assets/img/" + name + ".jpg");
    },
    //好评推荐
    getGoodList(){
      this.$axios.get("api/productTui/list-goods").then((res) => {
        this.goodList = res.data.data;

      })
    },
    //个性推荐服装
    getPersonal(){
      this.$axios.get("api/productTui/list-personal").then((res)=>{
        this.personal = res.data.data;

      })
    }
  },
  created() {
    this.go()
    this.showCookieValue()
    this.golunbo()
    this.getproductList()
    this.getGoodList()
    this.getPersonal()
  },
  updated() {
    this.showCookieValue()
  }
}
</script>

<style scoped>
@import "../assets/css/cssForIndex.css";
#price{
  font-size: 20px;
  color: #01c78a;
  margin-top: 10px;
  margin-left: 10px;
}
.list-personal>li{
  display: block;
}
.list-personal{
  display: block;
  list-style: none;
}
.list-tuijian-img>li{
  display: block;
}
.list-tuijian-img{
  display: block;
  list-style: none;
}
#gexing-tuijian:hover{
  color: #00dcc0;
}
#gexing-tuijian{
  display: block;
  margin-top: 5px;
  font-size: 14px;
  color: rgba(4, 162, 142, 0.32);
  text-decoration: none;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  width: 180px;
  overflow: hidden;

}
#desc-shops:hover{
  color: #00dcc0;
}
#desc-shops{
  display: block;
  margin-top: 5px;
  font-size: 14px;
  color: rgba(4, 162, 142, 0.32);
  text-decoration: none;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 180px;
  overflow: hidden;
}
.tuijian-list > li:hover{
  border-color: #01ccb3;
}
.tuijian-list > li {
  display: block;
  float: left;
  width: 200px;
  height: 300px;
  border: 1px solid rgba(222, 222, 222, 0.34);
  margin-top: 40px;
  margin-left: 30px;
}

.tuijian-list {
  display: block;
  list-style: none;
  clear:both;
}

#shops-list {
  display: inline-block;
  font-size: 8px;
  text-align: center;
  line-height: 20px;
  width: 60px;
  height: 20px;
  /*background-color: red;*/
  position: absolute;
  text-decoration: none;
  color: #727070;
}

#desc-list-shop {
  margin-left: 20px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 400;
}

#level3 > li {
  display: block;
  width: 60px;
  height: 20px;
  /*border: 1px solid black;*/
  float: left;
  margin-top: 5px;
  margin-left: 3px;
}

#level3 {
  display: block;
  list-style: none;
}

.list-desc {
  display: block;
  width: 60px;
  height: 24px;
  margin-top: 3px;
  /*border: 1px solid black;*/
  margin-left: 5px;
  float: left;
  font-size: 10px;
  text-align: center;
  line-height: 24px;
}

#level2 > li {
  margin-top: 10px;
  display: block;
  width: 580px;
  height: 30px;
  background-color: white;
  /*border: 1px solid rgba(21, 20, 20, 0.71);*/
  border-radius: 5px;
}

#level2 {
  display: block;
  list-style: none;
}

.levle1-screen {
  height: 479px;
  width: 612px;
  border: 1px solid rgba(224, 224, 224, 0.54);
  z-index: 99999;
  position: absolute;
  top: 0;
  margin-left: 200px;
  background-color: white;
  display: none;
}

#level1 > li:hover .levle1-screen {
  display: block;
}

#level1 > li:hover {
  background-color: rgba(43, 211, 186, 0.62);
  color: rgba(0, 0, 0, 0.42);
  border: none;
}

#level1 > li {
  display: block;
  width: 200px;
  height: 40px;
  color: white;
  line-height: 40px;
  background-color: rgba(48, 184, 189, 0.7);
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
}

#level1 {
  display: block;
  list-style: none;
}

.lunbo > li {
  display: block;
  width: 600px;
  height: 480px;
  /*background-color: red;*/
  border-radius: 15px;
}


.ys-imgto-Index {
  display: inline-block;
  height: 80px;
  width: 150px;
  margin-top: 35px;
  /*background-image: url("../assets/img/依尚logo.jpg");*/
  background-repeat: repeat;
  background-position: 50% 50%;
  background-size: 300px 200px;
}

.ys-body-main-lunbo {
  width: 600px;
  height: 478px;
  border: 1px solid rgba(201, 201, 201, 0.53);
  position: absolute;
  margin-top: 59px;
  margin-left: 210px;
  border-radius: 15px;
}

.ys-body-main-Notice {
  width: 365px;
  height: 480px;
  border: 1px solid rgba(201, 201, 201, 0.53);
  margin-left: 820px;
  margin-top: 59px;
  border-radius: 20px;
  background-color: rgba(78, 218, 224, 0.29);
}

.ys-lunbo-left {
  position: absolute;
  top: 50%;
  margin-top: -6px;
  margin-left: -14px;
}

.ys-lunbo-right {
  position: absolute;
  top: 50%;
  margin-top: -6px;
  margin-left: 0;
}

#btn-left {
  position: absolute;
  top: 50%;
  border-radius: 0 15px 15px 0;
  background-color: rgba(169, 169, 169, 0.25);
  border: none;
  color: white;
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
}

#btn-right {
  position: absolute;
  top: 50%;
  margin-left: 570px;
  border-radius: 15px 0 0 15px;
  background-color: rgba(169, 169, 169, 0.25);
  border: none;
  color: white;
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
}

#btn-left:hover {
  background-color: rgba(133, 130, 130, 0.58);
}

#btn-right:hover {
  background-color: rgba(133, 130, 130, 0.58);
}

.slider-index > li {
  list-style: none;
  margin: 3px;
  float: left;
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 4px;

}


#ys-shop-title {
  margin-top: 20px;
  position: absolute;
  margin-left: 5%;
  color: #01ccb3;
}

.ys-Notice-login {
  position: absolute;
  width: 130px;
  height: 40px;
  margin-left: 40px;
  margin-top: 150px;
  background-color: rgba(48, 184, 189, 0.7);
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
  border: none;
}

.ys-Notice-reg {
  height: 40px;
  position: absolute;
  width: 130px;
  margin-left: 195px;
  margin-top: 150px;
  background-color: rgba(48, 184, 189, 0.7);
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
  border: none;
}

.ys-Notice-login:hover {
  background-color: #0075bd;
  color: white;
  border: none;
}

.ys-Notice-reg:hover {
  background-color: #0075bd;
  color: white;
  border: none;
}

.ys-Notice-head-portrait {
  position: absolute;
  width: 70px;
  height: 70px;
  /*border: 1px solid black;*/
  margin-left: 148px;
  margin-top: 30px;
  border-radius: 35px;
  background-image: url("../assets/img/头像.jpg");
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: -18px -13px;
}

#ys-Notice-hello {
  position: absolute;
  margin-top: 120px;
  margin-left: 155px;
  color: #008676;
}

#ys-Notice-hello:hover {
  color: #00dcc0;
}

#notice-content {
  display: block;
  margin-top: 230px;
  font-family: 新宋体;
}

.ys-Notice-main > a {
  display: block;
  margin-top: 10px;
  text-decoration: none;
  width: 40px;
  height: 30px;
  margin-left: 5px;
  background-color: rgba(1, 204, 179, 0.25);
  line-height: 2em;
  text-align: center;
  font-size: 14px;
  border-radius: 5px;
  color: #008676;
}

.ys-Notice-main > a:hover {
  color: #029885;
}

.ys-Notice-main > em {
  display: inline-block;
  position: absolute;
  font-size: 10px;
  margin-left: 47px;
  margin-top: -24px;
}

.ys-Notice-bottom-bar {
  height: 60px;
  width: 320px;
  /*border: 1px solid black;*/
  margin-top: 8px;
}

.ys-Notice-bottom-bar-icon {
  height: 60px;
  width: 60px;
  /*border: 1px solid black;*/
  float: left;
  /*clear: both;*/
  margin-left: 15px;
  font-size: 25px;
  text-align: center;
  box-sizing: border-box;
  padding-top: 5px;
}

.ys-Notice-bottom-bar-icon > h6 {
  font-size: 5px;
  font-weight: 400;
  padding-left: 4px;
}

.bar-icon:hover {
  color: #01ccb3;
}

.ys-body-recommend {
  height: auto;
  width: 1190px;
  /*border: 1px solid black;*/
  margin-top: 10px;
  overflow: hidden;
}

#ys-body-recommend-good {
  position: absolute;
  display: inline-block;
  margin-left: 10px;
  font-weight: 400;
  font-family: "Microsoft Himalaya";
}

.ys-body-recommend-note {
  position: absolute;
  display: inline-block;
  width: 65px;
  height: 20px;
  border-radius: 5px;
  background-image: linear-gradient(to right, rgba(0, 247, 255, 0.67), #01c78a);
  color: white;
  font-size: 14px;
  text-align: center;
  margin-left: 110px;
  margin-top: 10px;
}



.ys-body-yours {
  width: 1190px;
  height: auto;
  /*border: 1px solid black;*/
  margin-top: 20px;
  overflow: hidden;
}

#ys-body-yours-good {
  position: absolute;
  display: inline-block;
  margin-left: 10px;
  font-weight: 400;
  font-family: "Microsoft Himalaya";
}

.ys-body-yours-note {
  position: absolute;
  display: inline-block;
  width: 65px;
  height: 20px;
  /*border: 1px solid black;*/
  border-radius: 5px;
  /*background-color: #01ccb3;*/
  background-image: linear-gradient(to right, rgba(0, 255, 60, 0.67), #3082bd);
  color: white;
  font-size: 14px;
  text-align: center;
  margin-left: 110px;
  margin-top: 10px;
}

#users:hover {
  background-color: white;
  text-decoration: none;
}

.ys-index-userInfo {
  position: absolute;
  height: 100px;
  width: 220px;
  /*border: 1px solid black;*/
  margin-left: 223.7px;
  margin-top: 0px;
  z-index: 99999;
  background-color: white;
  border-radius: 0 0 10px 10px;

}

.ys-index-userInfo-head {
  height: 60px;
  width: 60px;
  border: 1px solid black;
  margin-top: 20px;
  margin-left: 10px;
  border-radius: 30px;
  background-image: url('../assets/img/头像.jpg');
  background-repeat: no-repeat;
  background-size: 80px 80px;
  background-position: -13px -9px;
}

.ys-index-userInfo > a {
  text-decoration: none;
  position: absolute;
  display: block;
  font-size: 10px;
  margin-left: 100px;
  margin-top: -80px;
  color: #a9a9a9;
}

#ys-index-userInfo-loginout {
  margin-left: 160px;
}

.ys-index-userInfo > a:hover {
  color: #01ccb3;
}

.ys-index-userInfo > h5 {
  position: absolute;
  margin-left: 100px;
  margin-top: -50px;
  font-weight: 400;
  font-size: 12px;
}

#ys-index-userInfo-vip {
  margin-top: -20px;
}

#ys-Notice-haslogin {
  position: absolute;
  margin-top: 120px;
  margin-left: 155px;
  color: #008676;
}

#ys-Notice-haslogin:hover {
  color: #00dcc0;
}

.ys-notice-hasLogin {
  width: 300px;
  height: 50px;
  /*border: 1px solid black;*/
  position: absolute;
  margin-left: 33px;
  margin-top: 150px;
}

.ys-hasLogin-Info {
  /*display: inline-block;*/
  width: 50px;
  height: 50px;
  /*border: 1px solid black;*/
  float: left;
  margin-left: 8px;
  text-align: center;
  color: #01ccb3;
}

.ys-hasLogin-Info > a {
  display: block;
  text-decoration: none;
  font-size: 14px;
  color: black;
}

.ys-hasLogin-Info > a:hover {
  color: #01ccb3;
}
</style>